<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>修改密码</title>

	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
	<link rel="stylesheet" type="text/css" href="../../css/sqc.css" />


</head>
<style>
	html{
		background-color:#fff;
	}
	body {
		background-color: #fff;
		padding: 0 5%;
	}

	.input {
		line-height: 40px;
		border-radius: 5px;
	}

	.getcodecontent {
		line-height: 3.6rem;
	}

	.warn-box {
		margin-top: 10px;
	}
</style>

<body>
	<div id="blank" class="header">
		<!-- <div v-back.tapmode class="back"></div> -->
		<span class="title"></span>
	</div>
	<div id="app" v-cloak class="top-container">
		<div style="font-size:18px;font-weight:800;margin-top:40px">为了你的账户安全，请设置密码</div>
		<div style="margin-top:10px;margin-bottom: 10%;">请为{{phone}}设置密码</div>
		<div class="warn-box clearfix">
			<span class="warn-title-left">请输入密码</span>
			<span class="warn-title-right" v-show="warn_box">{{warn_title1}}</span>
			<input class="input" type="password" v-model="newPwd1" ref="input1" placeholder=""style="padding:1rem 5px;line-height:1.6rem" @blur="verifyPassword"	required />
		</div>
		<div class="warn-box clearfix">
			<span class="warn-title-left">请再输入一遍</span>
			<span class="warn-title-right" v-show="warn_box">{{warn_title2}}</span>
			<input class="input" type="password" v-model="newPwd2" ref="input1" placeholder="" style="padding:1rem 5px;line-height:1.6rem" @blur="verifyPassword"
				required />
		</div>
		<!-- <div class="warn-box clearfix">
			<span class="warn-title-left">请输入验证码</span>
			<span class="warn-title-right" v-show="warn_box">{{warn_title3}}</span>
		</div>
		<div class="input-center input-text" style="position:relative;">
			<input type="number" class="getcodecontent" v-model="verify_code" style="padding-left: 5px;" />
			<sendcode @codemessage="codeMessage" :phone="phone" type="7" style="position:absolute;right:0px;top:1.8rem">
			</sendcode>
		</div> -->
		<div class="submit-true submit-false" v-show="subPassword" v-myclick="updPassword">完成</div>
		<div class="submit-false" v-show="!subPassword">完成</div>

	</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script>

	var vm, user, phone


	apiready = function () {
		setBSImg();
		new Vue({
			el: '#blank'
		});
		user = JSON.parse(getPrefs('user'));
		phone = Number(api.pageParam.phone) ? Number(api.pageParam.phone) : user.phone
		initApp();
		api.parseTapmode();
		addListeners();

	};

	function initApp() {
		vm = new Vue({
			el: '#app',
			data: {
				phone: phone,
				verify_code: '',
				newPwd1: '',
				newPwd2: '',
				btn: 1,
				warn_box: false,
				warn_title1: '',
				warn_title2: '',
				warn_title3: '',
				subPassword: false,
			},
			methods: {
				updPassword: function () {
					var passwordVerify = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/
					if (!passwordVerify.test(this.newPwd1)) {
						vm.warn_box = true
						vm.warn_title1 = "请输入6-20位含字母和数字的密码"
						return
					}
					var data = {
						member_id: getPrefs('member_id'),
						phone: this.phone,
						// verify_code: this.verify_code,
						password: this.newPwd1,
						old_password: ''
					};
					var callback = function (ret) {
						if (ret.errcode == 0) {
							openWin('../../index');
						} else {
							api.alert({
								title: '错误',
								msg: ret.message,
								buttons: ['确定']
							}, function (ret, err) {

							});
						}
					};
					pinet.post(URL.changePwd, data, callback);
				},

				submitNewPassword: function () {
					// if (/^\d{6}$/.test(this.verify_code)) {
					// 	this.btn = 2
					// }
				},
				verifyPassword: function () {
					var passwordVerify = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/
					if (!passwordVerify.test(this.newPwd1)) {
						vm.warn_box = true
						vm.warn_title1 = "请输入6-20位含字母和数字的密码"
					}else{
						vm.warn_title1 = ""
					}
				},
				// codeMessage: function (a) {
				// 	this.warn_title1 = a;
				// 	this.warn_box = true;
				// }
			},
			watch: {
				// verify_code: function () {
				// 	this.submitNewPassword()
				// },
				newPwd1: function () {
					if(this.newPwd1 != '' && this.newPwd2 != ''){
						if (this.newPwd1 === this.newPwd2) {
						vm.warn_box = false
						vm.warn_title1 = ''
						vm.subPassword = true
					} else {
						vm.warn_box = true
						vm.warn_title1 = '两次输入的密码不相同'
						vm.subPassword = false
					}
					}
				},
				newPwd2: function () {
					if (this.newPwd1 === this.newPwd2) {
						vm.warn_box = false
						vm.warn_title2 = ''
						vm.subPassword = true
					} else {
						vm.warn_box = true
						vm.warn_title2 = '两次输入的密码不相同'
						vm.subPassword = false
					}
				}
			}
		});
	}


	function addListeners() {
		api.addEventListener({
			name: 'viewappear'
		}, function () {
			onPageStart();
		});

		api.addEventListener({
			name: 'viewdisappear'
		}, function (ret, err) {
			onPageEnd();
		});

		api.addEventListener({
			name: 'keyback'
		}, function (ret, err) {
			// onPageEnd();
			// api.closeWin();
		});
	}


</script>

</html>
